<!-- 签署合同填写控件 -->
<template>
  <div>
    <van-popup v-model="showControl" round :close-on-click-overlay="false">
      <div class="popup-control-box flex">
        <div class="popup-control-box-title s-15">完善合同</div>
        <div class="popup-control-main">
          <van-cell-group>
            <template v-for="(item,index) in datas.form_data">
              <!-- 1 文本 4身份证 5数字 6 日期 -->
              <template v-if="item.fill_type ==1">
                <van-field v-if="item.form_type == 1" rows="1" autosize type="textarea" :key="item.id" v-model="item.form_value" :label="item.form_name" :placeholder="`请输入${item.form_name}`" />
                <van-field v-if="item.form_type == 4" :formatter="formatterCard" maxlength="18" @input="verifyCardLength(item.form_value,index)" :key="item.id" v-model="item.form_value" :label="item.form_name" :placeholder="`请输入${item.form_name}`" />
                <van-field v-if="item.form_type == 5" type='number' :key="item.id" v-model="item.form_value" :label="item.form_name" :placeholder="`请输入${item.form_name}`" />
                <van-field v-if="item.form_type == 6" @click="showDatePickerHandle(index)" :formatter="formatterData" :key="item.id" v-model="item.form_value" :label="item.form_name" :placeholder="`请输入${item.form_name}`" />
              </template>
            </template>
          </van-cell-group>
        </div>
        <div class="popup-control-btn flex-j-sa">
          <van-button type="default" size="small" @click="hiddenPop">取消</van-button>
          <van-button type="danger" size="small" @click="toSign">去签署</van-button>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="showDatePicker" round :close-on-click-overlay="false" position="bottom" >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        @cancel="hiddenDatePickerHandle" @confirm="confirmDatePickerHandle"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    datas: {
      type: Object,
      default: () => {}
    },
    cid:{
      type: [Boolean,String],
      default: '0'
    },
  },
  watch: {
    value(val) {
      this.showControl = val;
    }
  },
  data() {
    return {
      showControl: false,
      showDatePicker: false,
      minDate: new Date(2020, 0, 1),
      currentDate: new Date(),
      currentIndex: 0
    };
  },
  components: {},
  computed: {},
  methods: {
    hiddenPop() {
      this.$emit("input", false);
    },
    toSign() {
      let _AllSet = true;
      let _text = '';
      this.datas.form_data.forEach(item => {
        if(item.fill_type == 1 && item.form_value == '') {
          _AllSet = false;//有未填写的控件
          _text = '请填写完整数据！';
        }
        if(item.verify) {
          _AllSet = false;//有未填写的控件
          _text = '请输入18位身份证号';
        }
      });
      if(!_AllSet) return this.$toast(_text);
      this.toSignPage();
    },
    toSignPage(){
      let _url = '';
      let json = {
        scene_id: this.datas.id ,
        cid: this.cid,
        form_data: this.datas.form_data
      };
      if(this.$route.params.scene == 1){
        _url = 'plugin.shop-esign-v2.frontend.controllers.index.order';
        json.order_id = this.$route.params.order_id;
      }
      if(this.$route.params.scene == 2) _url = 'plugin.shop-esign-v2.frontend.controllers.index.withdraw';
      if(this.$route.params.scene == 3) _url = 'plugin.shop-esign-v2.frontend.controllers.index.loveChange';
      if(this.$route.params.scene == 4) _url = 'plugin.shop-esign-v2.frontend.controllers.index.integralSign';
      if(this.$route.params.scene == 5) _url = 'plugin.shop-esign-v2.frontend.controllers.index.txSign';
      if(this.$route.params.scene == 6) _url = 'plugin.shop-esign-v2.frontend.controllers.index.download-sign';
      $http
        .post(_url, json,".")
        .then(response => {
          if (response.result === 1) {
            this.hiddenPop();
            this.$nextTick(()=>{
              this.$router.replace(this.fun.getUrl("signPage",{id: response.data.contract_id},{ cid: this.cid , from: 'signV2',scene: this.$route.params.scene,oid: this.$route.params.order_id||0}));
            });
          } else {
            this.$dialog.alert({message:response.msg});
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    formatterCard(value) {
      // 过滤非身份证字符
      return value.replace(/[^\d|xX]/g, '');
    },
    formatterData(value) {
      let reg = /.*[\u4e00-\u9fa5]+.*$/;
      if(reg.test(value)){
        return '';
      }
      return value;
    },
    verifyCardLength(e,i){
      this.datas.form_data[i].verify = e.length < 18? true: false;
    },
    showDatePickerHandle(i){
      this.showDatePicker = true;
      this.currentIndex = i;
    },
    hiddenDatePickerHandle(){
      this.showDatePicker = false;
    },
    confirmDatePickerHandle(e){
      this.showDatePicker = false;
      let date = e.Format("yyyy-MM-dd");
      this.datas.form_data[this.currentIndex].form_value = date;
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.popup-control-box {
  width: 18.875rem;
  flex-direction: column;

  .popup-control-box-title {
    height: 3rem;
    line-height: 3rem;
  }

  .popup-control-main {
    max-height: 19rem;
    overflow: scroll;
  }

  .popup-control-main::-webkit-scrollbar {
    width: 0 !important;
  }

  .popup-control-btn {
    margin: 10px;
  }

  .van-button--small {
    width: 80px;
  }
}
</style>
